<template>
  <el-container>
    <el-header style="background-color: #fff" class="top">
      <div class="bianhao">
        <span>工单编号：</span>
        <div class="input">
          <el-input v-model="input" placeholder="请输入"></el-input>
        </div>
      </div>
      <div class="bianhao">
        <span>工单状态：</span>
        <div class="input">
          <el-select v-model="value" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.statusId"
              :label="item.statusName"
              :value="item.statusId"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="query"
          >查询</el-button
        >
      </div>
    </el-header>
    <el-main class="main">
      <div class="bottom-top">
        <el-button class="xj" @click="newCreate"
          ><div>
            <i class="el-icon-circle-plus-outline"></i> <span>新建</span>
          </div></el-button
        >

        <el-button @click="configFn" class="gdpz"
          ><div>
            <span>工单配置</span>
          </div></el-button
        >
      </div>

      <div class="bottom-main">
        <el-table
          :data="tableData"
          style="width: 100%"
          empty-text="暂时没有相关数据~"
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
          ></el-table-column>
          <el-table-column prop="taskCode" label="工单编号" width="180">
          </el-table-column>
          <el-table-column prop="innerCode" label="设备编号"> </el-table-column>
          <el-table-column prop="taskType.typeName" label="工单类型">
          </el-table-column>
          <el-table-column label="工单方式">
            <template slot-scope="scope">
              {{ scope.row.createType ? '手动' : '自动' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="taskStatusTypeEntity.statusName"
            label="工单状态"
          >
          </el-table-column>
          <el-table-column prop="userName" label="运营人员"> </el-table-column>
          <el-table-column prop="createTime" label="创建日期">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="bottom-bottom">
        <span class="jl"
          >共{{ totalCount }}条记录 第{{ pageIndex }}/{{ totalPage }}页</span
        >
        <el-button-group class="button">
          <el-button-group>
            <el-button
              icon="el-icon-arrow-left"
              class="right"
              :disabled="pageIndex === 1 ? true : false"
              @click="previous"
              >上一页</el-button
            >
            <el-button @click="next"
              >下一页<i class="el-icon-arrow-right el-icon--right"></i
            ></el-button>
          </el-button-group>
        </el-button-group>
      </div>
    </el-main>
    <!-- 新建 -->
    <Create :create.sync="create" :getList="getList" :ref="create"></Create>
    <!-- 工单配置 -->
    <Config v-model="config" :getList="getList"></Config>
    <!-- 详情 -->
    <Details :details.sync="details" :xiangqing="xiangqing"></Details>
  </el-container>
</template>

<script>
import { getTaskList, getTaskStatus, getTaskInfo } from '@/api/work'
import Config from './components/config.vue'
import Create from './components/create.vue'
import Details from './components/details.vue'
export default {
  name: 'operate-page',
  components: {
    Config,
    Create,
    Details
  },
  data() {
    return {
      input: '',
      options: [],
      value: '',
      tableData: [],
      pageIndex: 1,
      pageSize: 10,
      states: [],
      totalPage: 0,
      totalCount: 0,
      create: false,
      config: false,
      details: false,
      xiangqing: {}
    }
  },
  async created() {
    this.options = await getTaskStatus()
    this.getList()
  },
  methods: {
    // 获取这一面数据
    async getList() {
      const res = await getTaskList(this.pageIndex, this.pageSize)
      this.tableData = res.currentPageRecords
      this.totalPage = res.totalPage
      this.totalCount = res.totalCount
      // console.log(this.tableData)
    },
    // 上一页
    previous() {
      this.pageIndex--
      this.getList()
    },
    // 下一页
    next() {
      this.pageIndex++
      this.getList()
    },
    //  查询
    async query() {
      // console.log(this.input, this.value)
      const res = await getTaskList(
        this.pageIndex,
        this.pageSize,
        this.input,
        this.value
      )
      this.tableData = res.currentPageRecords
      if (res.totalPage === '0') {
        this.totalPage = 1
      } else {
        this.totalPage = res.totalPage
      }
      console.log(res)
      this.totalCount = res.totalCount
    },
    // 新建
    newCreate() {
      this.create = true
    },

    // 工单配置
    configFn() {
      this.config = true
    },
    // 查看详情
    async handleClick(row) {
      const res = await getTaskInfo(row.taskId)
      this.xiangqing = res
      this.details = true
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .top {
  width: 1650px;
  height: 64px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .bianhao {
    display: flex;
    align-items: center;
    margin-right: 20px;
    .input {
      height: 36px;
      width: 205px;
    }
    span {
      font-size: 14px;
    }
  }
}

::v-deep .main {
  width: 1650px !important;
  //   height: 600px;
  background-color: #fff;

  .bottom-top {
    display: flex;
    height: 36px;
    padding: 20px 15px 0px 8px;
    background-color: #fff;
    .xj {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80px;
      height: 36px;
      margin-left: 0px;
      border: none;
      background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
      color: #fff;
    }
    .gdpz {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fbf4f0 !important;
      height: 36px;
      width: 80px;
      margin-left: 10px;
      border: none;
      color: #655b56 !important;
    }
  }
  .bottom-main {
    margin-top: 30px;
  }
  .bottom-bottom {
    display: flex;
    justify-content: center;
    position: relative;
    // align-items: center;
    margin: 40px 0px 40px 0px;
    color: #dbdfe5;
    .jl {
      font: 16px;
      position: absolute;
      top: 0px;
      left: 0;
      width: 300px;
    }
    .button {
      position: absolute;
      top: -10px;
      right: 150px;
      .right {
        position: absolute;
        top: 0px;
        right: 150px;
      }
    }
  }
}

table {
  border-collapse: separate;
  text-indent: initial;
  border-spacing: 0px;
}
</style>
